import { computed } from 'vue';
// import { useWindowSize } from '@vueuse/core';
// import { PC_DEVICE_WIDTH } from '@/constants';

// const { width } = useWindowSize();

/**
 * 判断当前是否为移动设备
 * 判断依据屏幕宽度是否小于一个指定的宽度(1280)
 */
export const isMobileTerminal = computed(() => {
  // return  width.value < PC_DEVICE_WIDTH
  return /Android | webOS | iPhone | iPad | iPod | BlackBerry | IEMobile | Opera Mini/i.test(
    navigator.userAgent
  );
});

/**
 * 动态指定 rem 基准值, 最大不超过 40px
 * 根据用户的屏幕宽度, 进行计算, 把计算出来的值赋值给 html 根标签作为 font size 大小
 */
export const useREM = () => {
  // 最大的 font useWindowSize
  const MAX_FONT_SIZE = 40;

  function handler() {
    // 获取 html 标签
    const html = document.querySelector('html');

    // 计算 font size
    // 根据屏幕宽度 / 10
    let fontSize = window.innerWidth / 10;
    fontSize = fontSize > MAX_FONT_SIZE ? MAX_FONT_SIZE : fontSize;

    // 赋值给 html
    html!.style.fontSize = fontSize + 'px';
  }

  // 监听 html 文档被解析完成的事件
  document.addEventListener('DOMContentLoaded', handler);

  // 监听窗口变化事件
  window.addEventListener('resize', () => handler());
};
